<template>
  <div class="xui-treeview-item">
    <div class="item-box" @click.stop="selectClcik">
        <a @click.stop="toggleClick"><xui-icon :type="icon.nf_custom_folder"></xui-icon></a>
        <label>{{ props.data.lable }}</label>
    </div>
    <div class="item-child" v-if="props.data.children">
      <tree-item
        v-for="(it, i) in props.data.children"
        :key="i"
        :data="it"
      ></tree-item>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropType } from "vue"
import XuiIcon from '../icon/index.vue'
import icon from '../icon/index'
import type { TreeNode } from "../type"
const props = defineProps({
  data: {
    type: Object as PropType<TreeNode>,
    required: true,
  },
});

const toggleClick = () => {
    console.log('toggleClick')
}
const selectClcik = () => {
    console.log('selectClcik')
}
</script>
<style lang="scss" scoped>
.xui-treeview-item {
    .item-box {
        padding: 5px;
        a {
            margin: 0.5em;
            cursor: pointer;
            &:hover {
                color: #179f84;
            }
        }
        &:hover {
            background: #eee;
        }
    }
    .item-child {
        padding: 0 1em;
    }
}
</style>
